<template>
    <div class="editor-box">
        <el-tabs v-model="editableTabsValue" type="card" editable class="tabs-box" @edit="handleTabsEdit">
            <el-tab-pane v-for="item in editableTabs" :key="item.name" :label="item.title" :name="item.name">
                <div class="action-box flex align-center justify-between">
                    <div class="action-left flex align-center">
                        <h3>话术内容</h3>
                        <div class="btn">AI帮写</div>
                        <div class="btn">AI拓写</div>
                    </div>
                    <div class="action-right flex align-center">
                        <div class="btn">随机词</div>
                        <div class="btn">促单话术</div>
                        <div class="btn">插播素材</div>
                        <div class="btn">违禁词</div>
                        <div class="btn">试听</div>
                    </div>
                </div>
                <div :contenteditable="true" class="text-box default-scroll">
                    {{ store.state.defaultScriptText }}
                </div>
                <el-row class="btn-row" justify="end" align="middle">
                    <el-button size="small">删除话术</el-button>
                    <el-button type="primary" size="small">保存数据</el-button>
                </el-row>
            </el-tab-pane>
        </el-tabs>
    </div>
    <el-dialog
        title="AI帮写"
        :visible.sync="showHelpWrite"
        width="30%"
        @close="">
        <span></span>
        
    </el-dialog>
    
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useAppStore } from "@/store/index"

const showHelpWrite = ref(false)
const store = useAppStore()

const editableTabsValue = ref('1')
const editableTabs = ref([
    {
        title: '话术1',
        name: '1',
        content: '话术1',
    },
    {
        title: '话术2',
        name: '2',
        content: '话术2',
    },
])

const handleTabsEdit = (targetName, action) => {
    if (action === 'add') {
        const newTabName = `话术${editableTabs.value.length + 1}`
        editableTabs.value.push({
            title: 'New Tab',
            name: newTabName,
            content: 'New Tab content',
        })
        editableTabsValue.value = newTabName
    } else if (action === 'remove') {

        const tabs = editableTabs.value
        if (tabs.length === 1) {
            ElMessage.error('请至少保留一个话术')
            return
        }
        let activeName = editableTabsValue.value
        if (activeName === targetName) {
            tabs.forEach((tab, index) => {
                if (tab.name === targetName) {
                    const nextTab = tabs[index + 1] || tabs[index - 1]
                    if (nextTab) {
                        activeName = nextTab.name
                    }
                }
            })
        }

        editableTabsValue.value = activeName
        editableTabs.value = tabs.filter((tab) => tab.name !== targetName)
    }
}
</script>

<style lang="less" scoped>
.editor-box {
    color: @color-white;
    background-color: @bg-default;

    .action-box {
        padding: 10px 20px;

        h3 {
            margin: 0 20px 0 0;
            padding: 0;

        }

        .btn {
            font-size: 12px;
            color: @btn-color;
            cursor: pointer;
            margin-right: 20px;
        }
    }

    .tabs-box {
        height: 100%;

        :deep(.el-tabs__content) {
            background-color: #000;
        }

        :deep(.el-tabs__header) {
            margin: 0;
        }

    }

    .text-box {
        color: #000;
        height: 100px;
        overflow-y: auto;
        padding: 10px;
        margin-bottom: 10px;
        background-color: @color-white;
    }

    .btn-row {
        padding-right: 20px;
    }



    :deep(.el-tabs__item) {
        color: @color-white;

        &.is-active {
            background-color: #000;
        }
    }

    :deep(.el-tabs__new-tab) {
        color: #fff;
    }
}
</style>